<template>
  <div>
    <el-button type="primary"  @click="fun()">添加电费用户</el-button>
    <el-table
    prop="id"
      :data="arr?arr.slice((currentPage-1)*pagesize,currentPage*pagesize):[]"
      style="width: 100%"
      :default-sort="{ prop: 'date', order: 'descending' }">
      <el-table-column
      type="selection"
      width="55">
    </el-table-column>
      <el-table-column
        prop="ownerName"
        label="业主名"
        width="190">
      </el-table-column>
      <el-table-column prop="houseId" label="房屋编号" width="190">
      </el-table-column>
      <el-table-column prop="createTime" label="缴费计算时间起" width="190">
      </el-table-column>
      <!-- <el-table-column prop="createTime" label="缴费计算时间止" width="190">
      </el-table-column> -->
      <el-table-column prop="feeStatus" label="缴费情况" width="190">
        <template slot-scope="scope">
        <el-tag :type="scope.row.feeStatus=='0'?'danger':'success'">{{scope.row.feeStatus=='0'?'未缴费':'已缴费'}}</el-tag>
      </template>
      </el-table-column>
      <el-table-column prop="feePerson" label="缴费人" width="190">
      </el-table-column>
      <!-- <el-table-column prop="eleFee" label="缴费金额"  width="190">
      </el-table-column> -->
      <el-table-column prop="eleFee" label="电费余额"  width="190">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
        <el-button
          size="mini"
          type="primary" plain 
          @click="handleEdit(scope.$index, scope.row)">缴费</el-button>
        <el-button
        type="danger" icon="el-icon-delete" circle
          @click="handleDelete(scope.$index, scope.row)"></el-button>
      </template>
      </el-table-column>
      <el-table-column align="right">
      <template slot="header" slot-scope="{}">
        <el-input
          v-model="search"
          size="mini"
          placeholder="输入业主名搜索"
          @change="searchfun()"
          clearable/>
      </template>
    </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      background
      :page-sizes="[4, 8, 12, 16]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="arr.length"
    >
    </el-pagination>
    <el-dialog
  title="请填写用户信息"
  :visible.sync="dialogVisible"
  width="30%"
  :before-close="handleClose">
  <el-form ref="form" :model="form" label-width="80px"> 
    <el-form-item label="房屋编号">
    <el-select v-model="form.num" clearable filterable placeholder="请选择" @change="selhouse()">
      <el-option
          v-for="item in allhousenum"
          :key="item.id"
          :label="item.houseNum"
          :value="item.houseNum">
      </el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="业主名" >
    <el-input v-model="form.name" disabled></el-input>
  </el-form-item>
  <el-form-item label="入住时间">
    <el-col :span="11">
      <el-date-picker type="date" value-format="yyyy-MM-dd" placeholder="选择日期" v-model="form.date1" style="width: 100%;" disabled></el-date-picker>
    </el-col>
    <el-col :span="11">
      <el-date-picker type="date" value-format="yyyy-MM-dd" placeholder="选择日期" v-model="form.date2" style="width: 100%;" disabled></el-date-picker>
    </el-col>
  </el-form-item>
  <el-form-item label="缴费金额">
    <el-input type="textarea" v-model="form.money"></el-input>
  </el-form-item>
  <el-form-item label="缴费人">
    <el-input type="textarea" v-model="form.eleperson"></el-input>
  </el-form-item>
  <el-form-item label="电费余额">
    <el-input type="textarea" v-model="form.elemoney" disabled></el-input>
  </el-form-item>
</el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="add()">确 定</el-button>
  </span>
</el-dialog>
<div v-html="payform" ref="payform" ></div>
  </div>
</template>

<script>
import { dianfei ,dianfeiadd,dianfeidel,findAllHouse,selecthouse,find,electchange} from "@/apis/hhp/hhplink.js";
export default {
    data() {
        return {
          arrp:"",
                // 默认显示第几页
        currentPage: 1,
        pagesize: 8,
            arr:[],
            currentPage3: 1,
            //对话框
            dialogVisible: false,
            search: '',
            index:"",
            money:"已缴费",
            allhousenum:"",
            eleid:'',
            houseid:'',
            electid:'',
            payform:'',
            form: {
              id:"",
          name: '',
          date1: '',
          date2:'',
          delivery: false,
          num:'',
          money:'',
          value1:''
        },

        }
    },
    methods:{
    //添加里面展示房屋编号号对应相关信息
      selhouse(){
        selecthouse(this.form.num).then((ok)=>{
          console.log(ok);
          this.form.name=ok.data.data.ownName;
          this.form.date1=ok.data.data.createTime;
          this.form.date2=ok.data.data.updateTime;
          this.form.elemoney=ok.data.data.totalEleFee;
          this.eleid=ok.data.data.id;
          this.houseid=ok.data.data.houseId;
        })
      },
        // 每页显示的条数
      handleSizeChange(pagesize) {
      this.pagesize = pagesize;
    },
    handleCurrentChange(currentPage){
      this.currentPage = currentPage;
    },
      onSubmit() {
        console.log('submit!');
      },
      //查询单个用户
      searchfun() {
      console.log(this.search);
      find(this.search).then((ok) => {
        console.log(ok);
        this.arr = ok.data.data;
      });
      if (this.search == "") {
        dianfei().then((ok)=>{
          console.log(ok);
          this.arr=ok.data.data;
          this.arrp=ok.data.length; 
          console.log(this.arr);
        })
      }
    },
      //增加用户
      fun(){
        this.dialogVisible=true;
      },
      add(){
        dianfeiadd(this.form.name,this.eleid,this.houseid,this.form.eleperson,this.form.money).then((ok)=>{
          console.log(ok);
          this.arr=ok.data;
          console.log(this.arr,"666");
          this.dialogVisible=false;
        })
       this.$router.go(0)
      },
      //缴费
      handleEdit(index, row) {
        console.log(index, row);
        this.$prompt('请输入缴费金额', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(({ value }) => {
          this.electid=row.id;
          this.value1=value
          this.$message({
            type: 'success',
            message: '你的缴费金额为: ' + value,
          });
          //修改缴费金额
          console.log(value,"dianfei");
          console.log(this.electid);
          console.log(this.value1);
          console.log(value);
          electchange(this.electid,this.value1).then((ok)=>{
            if(ok.data.code==200){
            this.payform=ok.data.data
            }
          this.$nextTick(()=>{
   //获得vue对象关联的payform对象(this.$refs.payform)，获得它的第一个子节点(children[0])，即为form标签，调用表单提交方法(submit())
         this.$refs.payform.children[0].submit();
          console.log(ok);
         })
        dianfei().then((ok)=>{
          console.log(ok);
          this.arr=ok.data.data;
          this.arrp=ok.data.length; 
          console.log(this.arr);
        })
      }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });       
        });
      })
    },
      //删除
      handleDelete(index, row) {
        console.log(index, row);
        this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          dianfeidel(row.id).then((ok)=>{
            console.log(ok);
          });
          this.$router.go(0)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
      //关闭提示
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(() => {
            done();
          })
          .catch(()=> {});
      },
    },
    mounted() {
      //查看数据
      dianfei().then((ok)=>{
        console.log(ok);
        this.arr=ok.data.data;
        this.arrp=ok.data.length; 
        console.log(this.arr);
      }),
      //添加里面获取所有房屋号
      findAllHouse().then((ok)=>{
        console.log(ok.data.data);
        this.allhousenum=ok.data.data;
        this.form.num=ok.data.data.houseNum;
      })
    }
}

</script>

<style scoped lang="scss">
.el-pagination{
  float: right;
}

</style>